<template>
   <div class="page-box">
        <div class="left-box">
            <div class="left-title-item">产品清单</div>
            <div class="left-content-box">
                <div 
                    :class="{'active': item.id === productBomId}"
                    v-for="item in productBomlist" :key="item.id"
                    @click="changeProductFn(item.id,item.produceName)"
                >
                    {{item.produceName}}
                </div>                
            </div>
        </div>
        <div class="right-box">
            <div class="search-form-box">
                <el-form 
                    :inline="true"
                    @submit.prevent="submitFn"
                >
                    <el-form-item label="物料编码">
                        <el-input size="small" v-model="searchKey" placeholder="请输入关键字" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" :icon="Search" @click="submitFn">查询</el-button>
                        <el-button size="small" :icon="Refresh" @click="resetFormFn">重置</el-button>                
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-box">
                <div>
                    <el-button type="primary" size="small" :icon="Plus" @click="addFn">新增物料</el-button>
                </div>
                <div class="table-content-box">
                    <el-table 
                        :data="filterTableList" 
                        size="small"
                        v-loading="loading"
                        border>
                        <el-table-column type="index" label="#" align="center" />
                        <el-table-column prop="materialCode" align="center" label="物料编码"></el-table-column>
                        <el-table-column prop="materialName" align="center" label="物料名称"></el-table-column>
                        <el-table-column prop="materialUseNum" align="center" label="用量"></el-table-column>
                        <el-table-column prop="materialUnit" align="center" label="物料单位"></el-table-column>
                        <el-table-column prop="materialType" align="center" label="物料类型"></el-table-column>
                        <el-table-column  label="操作" align="center">
                            <template #default="scope">
                                <el-button size="mini" @click="editFn(scope.$index, scope.row)">编辑</el-button>
                                <el-popconfirm 
                                    title="确定要删除吗?"
                                    confirmButtonText="确定"
                                    cancelButtonText="取消"
                                    placement="left-end"
                                    @confirm="deleteProduceBomFn(scope.row.materialId)"
                                >
                                    <template #reference>
                                        <el-button
                                            size="mini"
                                            type="danger"
                                        >
                                            删除
                                        </el-button>
                                    </template>
                                </el-popconfirm>                        
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
    <product-bom-drawer 
        :produceId="productBomId"
        :produceName="produceName"
        :showDrawer="showDrawer" 
        @closeDrawerFn="closeDrawerFn" 
        @submitCallback="submitCallback" 
        :drawerTitle="title" ref="draweRef" />
</template>
<script>
    import {Edit, Delete, Search,Refresh,Plus } from '@element-plus/icons-vue'
    import { onMounted, reactive, ref,toRefs } from 'vue'
    import productBomDrawer from './modules/productBomDrawer.vue'
    import axios from 'axios'
    import { ElMessage } from 'element-plus'
    export default{
        components:{
          productBomDrawer  
        },
        setup(){
            let data = reactive({
                productBomlist: [
                ],
                productBomId: 1,
                produceName: '',
                tableData: [                 
                ],
                filterTableList: [],
                showDrawer: false,
                title: '新增',
                searchKey: '',
                loading: false
            })
            const draweRef = ref(null)
            function submitFn(){
                // console.log('查询：'+data.searchKey)
                let list = []
                if(data.searchKey){
                    list = data.tableData.filter(item=>{
                        return item.materialCode.indexOf(data.searchKey) != -1
                    });
                }
                else{
                    list = data.tableData;
                }
                data.filterTableList = list
            }
            function resetFormFn(){
                data.searchKey = ''
                data.filterTableList = JSON.parse(JSON.stringify(data.tableData))
            }
            function addFn(){
                data.showDrawer = true
                data.title='新增'               
                const _draweRef = draweRef.value
                // _draweRef.formRef.value.resetFields()   
                _draweRef.isEdit = false                  
                _draweRef.afterShowDrawer({})
            }
            function editFn(index, rowData){
                data.showDrawer = true
                data.title='编辑'
                const _draweRef = draweRef.value
                // _draweRef.formRef.value.resetFields() 
                _draweRef.isEdit = true
                 _draweRef.afterShowDrawer(rowData)
                // _draweRef.form = rowData
                // console.log('draweRef', _draweRef.form)
            }
            function closeDrawerFn(){
                data.showDrawer = false
            }
            function changeProductFn(id,produceName){
                data.productBomId = id
                data.produceName = produceName
                loadData()
            }
            async function getProduceList(){
                let res = await axios.get('/productInfoList')
                let list = res.data
                if(list.success){
                    data.productBomlist = []
                    data.productBomlist = list.result.list
                    data.productBomId =  data.productBomlist[0].id
                    data.produceName =  data.productBomlist[0].produceName
                }
               loadData()
            }
            async function loadData(){
                data.loading = true
                setTimeout(async ()=>{   
                    let result = await axios.get('/produceBomList',{
                    params: { produceId: data.productBomId}
                    })
                    let produceBomList = result.data
                    if(produceBomList.success){
                        data.tableData = []
                        data.tableData = produceBomList.result
                    }
                    else{
                        data.tableData = []
                    }
                    data.filterTableList = JSON.parse(JSON.stringify(data.tableData))
                    data.loading = false
                }, 1000)
            }
            function submitCallback(){                
                loadData()
            }
            async function deleteProduceBomFn(materialId){
                let res = await axios.post('/deleteProduceBomInfo', {materialId,produceId: data.productBomId})
                let result = res.data
                if(result.success){
                    ElMessage({
                        message: result.result,
                        type: 'success',
                    })
                    loadData()
                }
                else{
                    ElMessage({
                        message: result.result,
                        type: 'error',
                    })                     
                }
            }
            onMounted(()=>{
                getProduceList()
            })
            return {               
                Edit,
                Delete,
                Refresh,
                Search,
                Plus,
                ...toRefs(data),
                draweRef,
                addFn,
                closeDrawerFn,
                submitFn,
                resetFormFn,
                editFn,
                changeProductFn,
                getProduceList,
                loadData,
                submitCallback,
                deleteProduceBomFn
            }
        }
    }
</script>

<style lang="scss" scoped>
 .page-box{
     padding: 0;
     background: transparent;
     display: flex;
     .left-box{
         min-height: 100%;
         margin-right: 10px;
         border-radius: 4px;
         .left-title-item{
             font-weight: 600;
             height: 30px;
            //  line-height: 40px;
             border-bottom: 1px solid #ccc;
         }
         .left-content-box{
             overflow: hidden;
             padding-top: 4px;
             &>div{
                 width: 100px;
                 height: 30px;
                 padding-left: 20px;
                 line-height: 30px;
                 cursor: pointer;
                 &:hover{
                     color: #409EFF;
                 }
                 &.active{
                    color: #409EFF;
                 }
             }
         }
     }
 }
 .search-form-box{
     border-radius: 4px;
     background: #fff;
     padding: 10px;
 }
 .el-form--inline .el-form-item{
   margin-bottom: 0;
 }
 .table-box{
     border-radius: 4px;
     background: #fff;
     padding: 10px;
     margin-top: 10px;
     .table-content-box{
         margin-top: 10px;
     }
 }
</style>